<template>
  <div>
    <el-form ref="form" :inline="true" :model="newObj" label-width="80px">
      <el-button type="primary" icon="el-icon-edit" @click="addDrivers()">添加司机</el-button>
      <el-form-item>
        <pickArea :showArea="false" @getSite="setArea3" />
      </el-form-item>
      <el-form-item label="请输入">
          <el-input v-model="orderQuery.driverName" placeholder="请输入司机姓名"></el-input>
      </el-form-item>
      <el-button type="primary" @click="handleCurrentChange(1)">查询</el-button>
    </el-form>
    <el-table :data="drivers">
      <el-table-column prop="driverName" label="司机姓名"></el-table-column>
      <!-- <el-table-column prop="" label="司机状态"></el-table-column> -->
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="idCard" label="身份证号"></el-table-column>
      <el-table-column prop="birthday" label="生日"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <!-- <el-table-column prop="" label="派单数量"></el-table-column> -->
      <el-table-column prop="licenseGrade" label="驾驶证"></el-table-column>
      <el-table-column prop="createDate" label="创建时间"></el-table-column>
      <el-table-column prop label="操作">
        <template v-slot="scope">
          <el-button size="mini" type="primary" @click="getDetail(scope.row)">详情</el-button>
          <el-button size="mini" type="info" @click="amendDetail(scope.row)" >修改</el-button>
          <el-button size="mini" type="danger" @click="deleteDetail(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- -----------详情按钮------------- -->
    <el-dialog
      title="司机信息详情"
      :visible.sync="centerDialogVisible"
      width="40%"
      center>
      <el-descriptions :border="true">
        <el-descriptions-item label="id">{{ newObj.id }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ newObj.driverName}}</el-descriptions-item>
        <el-descriptions-item label="性别">{{newObj.gender}}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{newObj.idCard}}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ newObj.birthday}}</el-descriptions-item>
        <el-descriptions-item label="电话">{{ newObj.phone}}</el-descriptions-item>
        <el-descriptions-item label="驾驶证">{{ newObj.licenseGrade}}</el-descriptions-item>
        <el-descriptions-item label="居住地">{{ newObj.province + newObj.city + newObj.area + newObj.address}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- ---------------添加司机按钮---------------- -->
    <el-dialog
      title="添加司机"
      :visible.sync="addDialogDriver"
      width="40%"
      center >
      <el-form ref="form" :rules="formRules" :model="form" label-width="80px">
        <el-form-item label="名字" prop="driverName">
          <el-input v-model="form.driverName"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="form.idCard" maxlength="18"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="form.phone" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="驾驶证" prop="licenseGrade">
          <el-select v-model="form.licenseGrade" placeholder="请选择驾驶证类型">
            <el-option label="A1型" value="A1"></el-option>
            <el-option label="A2型" value="A2"></el-option>
            <el-option label="A3型" value="A3"></el-option>
            <el-option label="A4型" value="A4"></el-option>
            <el-option label="C1型" value="C1"></el-option>
            <el-option label="C2型" value="C2"></el-option>
            <el-option label="C3型" value="C3"></el-option>
            <el-option label="C4型" value="C4"></el-option>
            <el-option label="D型" value="D"></el-option>
            <el-option label="E型" value="E"></el-option>
            <el-option label="F型" value="F"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="居住地址" prop="address">
          <pickArea @getSite="setArea" />
          <el-input v-model="form.address"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="creat-order" type="primary" @click="createDrivers()">立即创建</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- -----------修改按钮------------- -->
    <el-dialog
      title="司机信息详情"
      :visible.sync="orderDialogAmend"
      width="45%"
      center>
      <el-descriptions :border="true">
        <el-descriptions-item label="姓名">
          <el-input v-model="amend.driverName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <el-radio-group v-model="amend.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-descriptions-item>

        <el-descriptions-item label="身份证号">
          <el-input v-model="amend.idCard" maxlength="18"></el-input>
        </el-descriptions-item>

        <el-descriptions-item label="生日">
          <el-date-picker
            v-model="amend.birthday"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-descriptions-item>

        <el-descriptions-item label="电话">
          <el-input v-model="amend.phone" maxlength="11"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="驾驶证" v-model="amend.licenseGrade">
          <el-select v-model="amend.licenseGrade">
            <el-option label="A1型" value="A1"></el-option>
            <el-option label="A2型" value="A2"></el-option>
            <el-option label="A3型" value="A3"></el-option>
            <el-option label="A4型" value="A4"></el-option>
            <el-option label="C1型" value="C1"></el-option>
            <el-option label="C2型" value="C2"></el-option>
            <el-option label="C3型" value="C3"></el-option>
            <el-option label="C4型" value="C4"></el-option>
            <el-option label="D型" value="D"></el-option>
            <el-option label="E型" value="E"></el-option>
            <el-option label="F型" value="F"></el-option>
          </el-select>
        </el-descriptions-item>

        <el-descriptions-item label="居住地址" prop="address">
          <pickArea
            :showArea="true"
            :imProv="amend.province"
            :imCity="amend.city"
            :imdistrict="amend.area"
            @getSite="setArea2"/>
          <el-input v-model="amend.address"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <el-button
        class="update-order"
        type="primary"
        @click="updateDetail(amend)">提 交</el-button >
    </el-dialog>

     <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentPage"
      :current-page.sync="currentPage"
      :page-size="10"
      layout="prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>
import pickArea from "@/components/pickArea.vue";
export default {
  inject: ["reload"],
  components: {
    pickArea,
  },
  data: function () {
    return {
      drivers: [],
      total: 0,
      centerDialogVisible: false,
      addDialogDriver: false,
      orderDialogAmend: false,
      newObj: {},
      newObj2: {},
      amend: {},
      orderQuery: {
        pageNum: 1,
        pageSize: 10,
      },
      currentPage: 1,
      form: {
        address: "",
        area: "",
        birthday: "",
        city: "",
        driverName: "",
        gender: "",
        idCard: "",
        licenseGrade: "",
        phone: "",
        province: "",
      },
      formRules: {
        driverName: [
          { required: true, message: "请输入用户姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度在 2 到 4 个字符", trigger: "blur" },
        ],
        gender: [
          { required: true, message: "请选择用户性别", trigger: "blur" },
        ],
        // idCard:[
        //   {required: true,message: '请输入身份证号',trigger: 'blur'},
        //   {min: 18, message: '长度在 18  个字符', trigger: 'blur' },
        // ],
        phone: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, message: "长度在 11  个字符", trigger: "blur" },
        ],
        birthday: [
          { required: true, message: "请选择生日日期", trigger: "blur" },
        ],
        licenseGrade: [
          { required: true, message: "请选择驾驶证类型", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请选择并填入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  async created() {
    this.handleCurrentChange(1); 
  },
  methods: {
    handleCurrentChange: async function (val = 1) {
      this.orderQuery.pageNum = val;
      const { data } = await this.$http.get(`/driverUser/getAllDriver?pageNum=${val}&pageSize=10&driverName=${this.orderQuery.driverName ? this.orderQuery.driverName : ""}&province=${this.orderQuery.province ? this.orderQuery.province : ""}&city=${this.orderQuery.city ? this.orderQuery.city : ""}
     `);
      if (data.code == 1) {
        this.drivers = data.object.list;
        this.currentPage = data.object.pageNum;
        this.total = data.object.total;
      } else {
        this.$message({
          message: data.message,
          type: "error",
        });
      }
    },
    handleSizeChange(val) {
      this.orderQuery.pageNum = val;
      this.orderQuery.pageSize = val;
      this.handleCurrentChange(1);
    },              
    handleCurrentPage(val) {
      this.currentPage = val;
      this.handleCurrentChange(val);
    },
    // ----页面详情按钮-----
    getDetail: async function (obj) {
      this.newObj = obj;
      this.centerDialogVisible = true;
    },
    // ------ 打开页面修改按钮------
    amendDetail: async function (obj) {
      setTimeout(() => {
        this.amend = obj;
      });
      this.orderDialogAmend = true;
    },
    // -------修改提交按钮-----
    updateDetail: async function (obj) {
      this.amend = obj;
      const { data } = await this.$http.post(
        `/driverUser/updateDriver`,
        this.amend,
      );
      if (data.code == 1) {
        this.$message.success("更新成功");
        this.orderDialogAmend = false;
      } else {
        this.$message.error("更新失败");
      }
    },
    // -----打开添加按钮-------
    addDrivers: async function () {
      this.addDialogDriver = true;
    },
    // -------添加司机-----
    createDrivers(form) {
      this.add = form;
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          this.$http.post(`/driverUser/addDriver`, this.form);
          this.$message.success("添加成功");
          this.addDialogDriver = false;
        } else {
          this.$message.error("提交失败，验证不通过");
          return false;
        }
        this.reload();
      });
    },
    // -------删除-------
    deleteDetail: async function (obj) {
      this.newObj2 = obj;
      this.$confirm("此操作将永久删除该司机信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await this.$http.delete(
            `/driverUser/deleteDriver?driverId=${this.newObj2.id}`
          );
          if (data.code == 1) {
            this.$message.success("删除成功");
            this.reload();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    setArea3: function (province, city) {
      this.orderQuery.province = province;
      this.orderQuery.city = city;
      this.handleCurrentChange()
    },
    setArea2: function (province, city, area) {
      this.amend.province = province;
      this.amend.city = city;
      this.amend.area = area;
    },
    setArea: function (province, city, area) {
      this.form.province = province;
      this.form.city = city;
      this.form.area = area;
    },
  },
};
</script>
<style>
.update-order {
  position: relative;
  left: 50%;
  transform: translate(-50%, 50%);
}
.creat-order {
  position: relative;
  left: 50%;
  transform: translate(-50%, 50%);
}
</style>